<template>
  <el-card>
    <div class="header-bar">
      <span class="title">低值耗材/配件管理</span>
      <el-input
        v-model="search.keyword"
        placeholder="名称/编号/品牌"
        size="small"
        style="width:180px;margin-right:10px;"
        clearable
      />
      <el-select
        v-model="search.status"
        placeholder="状态"
        size="small"
        style="width:120px;margin-right:10px;"
        clearable
      >
        <el-option label="正常" value="正常" />
        <el-option label="停用" value="停用" />
        <el-option label="耗尽" value="耗尽" />
      </el-select>
      <el-button type="primary" size="small" @click="onAdd">新增物资</el-button>
    </div>
    <el-table
      :data="filteredList"
      border
      style="width:100%;margin-top:16px;"
      height="500px"
      :row-key="row => row.id"
      :row-class-name="rowClassName"
    >
      <el-table-column prop="id" label="编号" width="110" />
      <el-table-column prop="name" label="名称" min-width="120" />
      <el-table-column prop="brand" label="品牌" width="100" />
      <el-table-column prop="model" label="型号" width="100" />
      <el-table-column prop="status" label="状态" width="90" />
      <el-table-column prop="spec" label="规格" width="100" />
      <el-table-column prop="stock" label="库存" width="80" />
      <el-table-column prop="threshold" label="警戒线" width="80" />
      <el-table-column prop="unit" label="单位" width="60" />
      <el-table-column prop="expire" label="有效期" width="110" />
      <el-table-column label="操作" width="320">
        <template #default="{ row }">
          <el-button size="small" @click="onIn(row)">入库</el-button>
          <el-button size="small" type="warning" @click="onOut(row)">出库</el-button>
          <el-button size="small" type="danger" @click="onLoss(row)">报损</el-button>
          <el-button size="small" @click="onEdit(row)">编辑</el-button>
          <el-button size="small" type="danger" @click="onDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/编辑物资弹窗 -->
    <el-dialog v-model="editVisible" :title="editForm.id ? '编辑物资' : '新增物资'">
      <el-form :model="editForm" label-width="80px">
        <el-form-item label="编号"><el-input v-model="editForm.id" /></el-form-item>
        <el-form-item label="名称"><el-input v-model="editForm.name" /></el-form-item>
        <el-form-item label="品牌"><el-input v-model="editForm.brand" /></el-form-item>
        <el-form-item label="型号"><el-input v-model="editForm.model" /></el-form-item>
        <el-form-item label="规格"><el-input v-model="editForm.spec" /></el-form-item>
        <el-form-item label="单位"><el-input v-model="editForm.unit" /></el-form-item>
        <el-form-item label="库存"><el-input-number v-model="editForm.stock" :min="0" /></el-form-item>
        <el-form-item label="警戒线"><el-input-number v-model="editForm.threshold" :min="0" /></el-form-item>
        <el-form-item label="状态">
          <el-select v-model="editForm.status">
            <el-option label="正常" value="正常" />
            <el-option label="停用" value="停用" />
            <el-option label="耗尽" value="耗尽" />
          </el-select>
        </el-form-item>
        <el-form-item label="有效期"><el-date-picker v-model="editForm.expire" type="date" placeholder="选择日期" style="width:100%;" /></el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editVisible = false">取消</el-button>
        <el-button type="primary" @click="onSave">保存</el-button>
      </template>
    </el-dialog>

    <!-- 入库/出库/报损弹窗复用 -->
    <el-dialog v-model="opVisible" :title="opTitle">
      <el-form :model="opForm" label-width="80px">
        <el-form-item :label="opTitle+'数量'">
          <el-input-number v-model="opForm.amount" :min="1" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="opVisible = false">取消</el-button>
        <el-button type="primary" @click="onOpSave">确定</el-button>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'


// 模拟数据
const list = ref([
  { id: 'M-0001', name: '注射器', brand: '三鑫', model: '5ml', spec: '5ml/支', unit: '支', stock: 120, threshold: 20, status: '正常', expire: '2025-03-01' },
  { id: 'M-0002', name: '一次性手套', brand: '英科', model: '中号', spec: '中/100只', unit: '盒', stock: 50, threshold: 10, status: '正常', expire: '2024-12-15' },
  { id: 'M-0003', name: '纱布', brand: '康乐', model: '10*10', spec: '10cm*10cm', unit: '包', stock: 38, threshold: 15, status: '正常', expire: '2025-01-31' },
  { id: 'M-0004', name: '输液器', brand: '普利', model: '20ml', spec: '20ml/根', unit: '根', stock: 200, threshold: 30, status: '正常', expire: '2025-06-30' },
  { id: 'M-0005', name: '一次性口罩', brand: '绿盾', model: '成人', spec: '50只/盒', unit: '盒', stock: 300, threshold: 40, status: '正常', expire: '2025-02-10' },
  { id: 'M-0006', name: '棉签', brand: '医洁', model: '15cm', spec: '15cm/包', unit: '包', stock: 80, threshold: 20, status: '正常', expire: '2025-04-15' },
  { id: 'M-0007', name: '体温计', brand: '欧姆龙', model: 'MC-246', spec: '电子', unit: '支', stock: 24, threshold: 8, status: '正常', expire: '2027-01-01' },
  { id: 'M-0008', name: '输血袋', brand: '卫康', model: '500ml', spec: '500ml/袋', unit: '袋', stock: 35, threshold: 10, status: '正常', expire: '2026-05-15' },
  { id: 'M-0009', name: '采血针', brand: '朝日', model: '25G', spec: '25G/盒', unit: '盒', stock: 60, threshold: 10, status: '正常', expire: '2025-11-20' },
  { id: 'M-0010', name: '棉球', brand: '华康', model: '小号', spec: '小/100个', unit: '包', stock: 44, threshold: 12, status: '正常', expire: '2025-08-01' },
  { id: 'M-0011', name: '医用胶带', brand: '3M', model: '1530-1', spec: '1寸*9.1米', unit: '卷', stock: 32, threshold: 8, status: '正常', expire: '2027-12-31' },
  { id: 'M-0012', name: '采血管', brand: '格雷', model: '2ml', spec: '2ml/支', unit: '盒', stock: 120, threshold: 20, status: '正常', expire: '2025-09-18' },
  { id: 'M-0013', name: '注射针头', brand: '恒安', model: '0.5mm', spec: '0.5mm/支', unit: '盒', stock: 75, threshold: 18, status: '正常', expire: '2025-10-11' },
  { id: 'M-0014', name: '尿袋', brand: '惠民', model: '2000ml', spec: '2000ml/只', unit: '包', stock: 28, threshold: 10, status: '正常', expire: '2026-03-22' },
  { id: 'M-0015', name: '棉手套', brand: '德尔', model: 'L', spec: '大号/双', unit: '双', stock: 65, threshold: 12, status: '正常', expire: '2025-06-12' }
])


// 查询
const search = reactive({ keyword: '', status: '' })
const filteredList = computed(() => {
  return list.value.filter(row => {
    const matchKey = !search.keyword ||
      row.name.includes(search.keyword) ||
      row.id.includes(search.keyword) ||
      row.brand.includes(search.keyword)
    const matchStatus = !search.status || row.status === search.status
    return matchKey && matchStatus
  })
})

// 新增/编辑
const editVisible = ref(false)
const editForm = reactive({
  id: '', name: '', brand: '', model: '', spec: '', unit: '', stock: 0, threshold: 0, status: '正常', expire: ''
})
function onAdd() {
  Object.assign(editForm, { id: '', name: '', brand: '', model: '', spec: '', unit: '', stock: 0, threshold: 0, status: '正常', expire: '' })
  editVisible.value = true
}
function onEdit(row) {
  Object.assign(editForm, row)
  editVisible.value = true
}
function onSave() {
  if (!editForm.id || !editForm.name) {
    ElMessage.warning('编号和名称必填')
    return
  }
   if (editForm.expire) {
    editForm.expire = dayjs(editForm.expire).format('YYYY-MM-DD')
  }
  const idx = list.value.findIndex(item => item.id === editForm.id)
  if (idx !== -1) {
    list.value[idx] = { ...editForm }
    ElMessage.success('编辑成功')
  } else {
    list.value.push({ ...editForm })
    ElMessage.success('新增成功')
  }
  editVisible.value = false
}
function onDelete(row) {
  ElMessageBox.confirm('确认删除？', '提示', { type: 'warning' }).then(() => {
    list.value = list.value.filter(item => item.id !== row.id)
    ElMessage.success('删除成功')
  })
}

// 入库/出库/报损
const opVisible = ref(false)
const opTitle = ref('入库')
const opForm = reactive({ id: '', amount: 1, opType: '' })

function onIn(row) {
  opTitle.value = '入库'
  Object.assign(opForm, { id: row.id, amount: 1, opType: 'in' })
  opVisible.value = true
}
function onOut(row) {
  opTitle.value = '出库'
  Object.assign(opForm, { id: row.id, amount: 1, opType: 'out' })
  opVisible.value = true
}
function onLoss(row) {
  opTitle.value = '报损'
  Object.assign(opForm, { id: row.id, amount: 1, opType: 'loss' })
  opVisible.value = true
}
function onOpSave() {
  const idx = list.value.findIndex(item => item.id === opForm.id)
  if (idx === -1) return
  if (opForm.opType === 'in') {
    list.value[idx].stock += opForm.amount
    ElMessage.success('入库成功')
  } else if (opForm.opType === 'out') {
    if (list.value[idx].stock < opForm.amount) {
      ElMessage.error('库存不足')
      return
    }
    list.value[idx].stock -= opForm.amount
    ElMessage.success('出库成功')
  } else if (opForm.opType === 'loss') {
    if (list.value[idx].stock < opForm.amount) {
      ElMessage.error('库存不足')
      return
    }
    list.value[idx].stock -= opForm.amount
    ElMessage.success('报损成功')
  }
  // 状态自动切换
  if (list.value[idx].stock <= 0) {
    list.value[idx].status = '耗尽'
  } else if (list.value[idx].stock <= list.value[idx].threshold) {
    list.value[idx].status = '正常'
  }
  opVisible.value = false
}

// 警戒线颜色提示
function rowClassName({ row }) {
  if (row.stock <= row.threshold) return 'row-warning'
  return ''
}
</script>

<style scoped>
.header-bar {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.title {
  font-size: 20px;
  font-weight: bold;
  margin-right: 20px;
}
/* 库存警戒线高亮 */
:deep(.el-table .row-warning) {
  background: #fffbe6;
}
</style>
